<template>
    <SysDialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
        @onClose="onCloseDialog" @onConfirm="onConfirmDialog">
        <template v-slot:content>
            <el-form :model="menuModel" ref="menuRef" :rules="menuRules" label-width="85px" :inline="false">
                <el-form-item label="上级菜单">
                    <el-tree-select v-model="menuModel.pid" :data="menuParentList" check-strictly class="pid">
                    </el-tree-select>
                </el-form-item>
                <el-form-item label="菜单标题" prop="title">
                    <el-input v-model="menuModel.title"></el-input>
                </el-form-item>
                <el-form-item label="图标" prop="icon">
                    <el-input v-model="menuModel.icon"></el-input>
                </el-form-item>
                <el-form-item label="urls" prop="urls">
                    <el-input v-model="menuModel.urls"></el-input>
                </el-form-item>
                <el-form-item label="请求方式" prop="method">
                    <el-select v-model="menuModel.method" placeholder="Select" clearable>
                        <el-option v-for="item in methodList" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否路由" prop="is_route">
                    <el-switch v-model="menuModel.is_route" inline-prompt active-text="是" inactive-text="否" />
                </el-form-item>
                <template v-if="menuModel.is_route">
                    <el-form-item label="路由名称" prop="name">
                        <el-input v-model="menuModel.name"></el-input>
                    </el-form-item>
                    <el-form-item label="路由地址" prop="path">
                        <el-input v-model="menuModel.path"></el-input>
                    </el-form-item>
                    <el-form-item label="模块" prop="component">
                        <el-input v-model="menuModel.component"></el-input>
                    </el-form-item>
                </template>
                <el-form-item label="是否菜单" prop="is_menu">
                    <el-switch v-model="menuModel.is_menu" inline-prompt active-text="是" inactive-text="否" />
                </el-form-item>
                <el-form-item label="排序" prop="ord">
                    <el-input v-model="menuModel.ord"></el-input>
                </el-form-item>
            </el-form>
        </template>
    </SysDialog>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

import { ElForm, ElMessage } from 'element-plus'

import SysDialog from '@/components/SysDialog.vue'
import useDialog, { DialogType } from '@/hooks/useDialog'
import useInstance from '@/hooks/useInstance'
import useMenuModel, { IMenu } from '@/composables/menu/useMenuModel'
import { postMenuApi, putMenuApi } from '@/http/api/menu'

const { dialog, onShowDialog, onCloseDialog } = useDialog()
const { global } = useInstance()
const { iMenuModel, menuRules } = useMenuModel()

// 接受父组件传进来的数据
defineProps(['menuParentList'])
// 调用父组件方法
const emit = defineEmits(['newGetMenuList'])

// 默认请求方式
const methodList = [
    {
        value: 'GET',
        label: 'GET',
    },
    {
        value: 'POST',
        label: 'POST',
    },
    {
        value: 'PUT',
        label: 'PUT',
    },
    {
        value: 'DELETE',
        label: 'DELETE',
    },
]
// 菜单绑定数据
const menuModel = reactive<IMenu>(iMenuModel())
// 菜单ref属性
const menuRef = ref<InstanceType<typeof ElForm>>()
// 弹窗显示
const onShow = (dialogType: string, title: string, editData?: any) => {
    global.$resetForm(menuRef.value, menuModel, iMenuModel)
    dialog.title = title
    dialog.width = '360px'
    dialog.height = '400px'
    onShowDialog()
    if (editData && dialogType == DialogType.EDIT) {
        global.$objCoppy(editData, menuModel)
    }
    menuModel.type = dialogType
}
// 弹窗确定
const onConfirmDialog = () => {
    menuRef.value?.validate(valid => {
        if (valid) {
            if (menuModel.type == DialogType.ADD) {
                addMenu(menuModel)
            }
            if (menuModel.type == DialogType.EDIT) {
                editMenu(menuModel)
            }
        }
    })
}
// 添加菜单
const addMenu = async (menuModel: IMenu) => {
    await postMenuApi(menuModel).then(res => {
        if (res && res.code == 201) {
            ElMessage.success('添加成功！')
            emit('newGetMenuList')
            global.$resetForm(menuRef.value, menuModel, iMenuModel)
            onCloseDialog()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
// 修改菜单
const editMenu = async (menuModel: IMenu) => {
    await putMenuApi(menuModel.id, menuModel).then(res => {
        if (res && res.code == 202) {
            ElMessage.success('修改成功！')
            emit('newGetMenuList')
            global.$resetForm(menuRef.value, menuModel, iMenuModel)
            onCloseDialog()
        } else {
            ElMessage.error(res.msg)
        }
    })
}

// 暴露法方给父组件
defineExpose({ onShow })

</script>

<style scoped lang='scss'>
.pid {
    width: 100%;
}
</style>